<!DOCTYPE html>
<html>
<head>
	<title>js_16</title>
</head>
<body>
	<input id="first-number" type="number" value="0" placeholder="第一个数字">
    <input id="second-number" type="number" value="0" placeholder="第二个数字">
    <button id="add-btn">加</button>
    <button id="minus-btn">减</button>
    <button id="times-btn">乘</button>
    <button id="divide-btn">除</button>
    <p id="result">运算结果</p>
	<script type="text/javascript">
		var g = function(id) {
			return document.getElementById(id);
		};

		var firstN = g("first-number"),
			secondN = g("second-number"),
			addBtn = g("add-btn"),
			minusBtn = g("minus-btn"),
			timesBtn = g("times-btn"),
			divideBtn = g("divide-btn"),
			result = g("result");
		addBtn.onclick = function() {
			res("add");
		};
		minusBtn.onclick = function() {
			res("minus");
		};
		timesBtn.onclick = function() {
			res("time");
		};
		divideBtn.onclick = function() {
			res("divide");
		};

		function res(type) {
			var f = parseFloat(firstN.value),
				s = parseFloat(secondN.value);
				switch(type) {
					case "add":
						result.innerHTML = "运算结果" + (f + s);
					break;
					case "minus":
						result.innerHTML = "运算结果" + (f - s);
					break;
					case "time":
						result.innerHTML = "运算结果" + (f * s);
					break;
					case "divide":
						if (s == 0) {
							alert("被除数不能为零");
							return;
						}
						result.innerHTML = "运算结果" + (f / s);
					break;
				}
		}

	</script>
</body>
</html>